<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>管理员列表</span>
            </div>
        </template>
        <el-table :model="tableData" :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="#" width="120" />
            <el-table-column prop="username" label="用户名" width="100" />
            <el-table-column prop="fullname" label="姓名" />
            <el-table-column prop="sex" label="性别" width="120" />
            <el-table-column prop="tel" label="手机" width="180" />
            <el-table-column prop="email" label="邮箱" width="180" />
            <el-table-column prop="avatar" label="头像" width="120">
                <template #default="scope">
                    <el-image style="width: 50px; height: 40px" v-model:src="scope.row.avatar" />
                </template>
            </el-table-column>
            <el-table-column prop="role_name" label="角色" width="120">
                <template #default="scope">
                    <el-tag :type="scope.row.id===1?'danger':''">{{ scope.row.role_name }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="role" label="操作" width="180">
                <template #default="scope">
                    <el-space>
                        <el-link :href="`#/System/Admin_edit/${scope.row.id}`">
                            <el-button size="small" type="success" plain>
                                <el-icon>
                                    <EditPen />
                                </el-icon>编辑
                            </el-button>
                        </el-link>
                        <el-link>
                            <el-button @click="handleRmove(scope.row.id,scope.$index)" :disabled="scope.row.id===1?true:false" size="small" type="danger" plain>
                                <el-icon>
                                    <Delete />
                                </el-icon>删除
                            </el-button>
                        </el-link>
                    </el-space>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>
<script setup>

import { ref, onMounted, onUpdated } from 'vue';
import Admin from '@/api/admin';
// import { ElMessage, ElMessageBox } from 'element-plus';

const tableData = ref([]);
//加载列表
// async function loadList() {
//     let { status, msg, data } = await Admin.list();
//     if (status) {
//         tableData.value = data;
//     } else {
//         ElMessage(msg);
//     }
// }
//挂载完成
// onMounted(() => {
//     loadList();
// });
onMounted(async ()=>{
    let { status, msg, data } = await Admin.list();
    if (status) {
        tableData.value = data;
    } else {
        ElMessage(msg);
    }
})
function handleRmove(id, i) {
    //confirm弹窗
    ElMessageBox.confirm('确定要删除该账户吗', { type: 'error', 'cancelButtonText': '取消', 'confirmButtonText': '确认' })
        .then(async () => {
            //确认
            //1.ajax
            //2.操作DOM         
            let { status, msg } = await Admin.remove({ id });
            if (status) {
                ElMessage.success(msg)
                tableData.value.splice(i, 1);
            } else {
                ElMessage.error(msg)
            }
        })
        .catch(() => {
            //取消
            ElMessage.info('取消成功')
        })
}
</script>
<style>
.box-card {
    width: 100%;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}
</style>
  